<template>
  <div class="app-container">

    <el-card class="box-card">
      <template>
        <label style="font-size: 16px;margin-right: 200px">前台主题色:</label>
        <el-color-picker
          v-model="color"
          show-alpha
          :predefine="predefineColors">
        </el-color-picker>
      </template>
      <div class="sult-btn">
        <el-button
          type="info"
          icon="el-icon-edit"
          @change="themeChanges"
        >提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import {Settings} from "@/layout/components";
import ThemePicker from '@/components/ThemePicker'
export default {
  name: 'Theme',
  components: {
    Settings,
    ThemePicker
  },
  data() {
    return {
      color: 'rgba(255, 69, 0, 0.68)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    }
  },
      methods: {
      themeChanges() {
      }
    }
}

</script>

<style scoped>
.sult-btn {
  margin: 20px 0;
}
</style>
